<template>
	<view v-if="show" style="position: fixed;top:15%;right: 50%;transform: translateX(50%);">
		<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="show">
			<view :class="type" class="flex flex-column align-center py-1 px-5" style="border-radius: 10rpx;">
				<text class="font-lg font-weight-bold">{{title}}</text>
				<view class="">
					<text>{{content}}</text>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: "Notify",
		data() {
			return {
				modeClass: ['fade', 'slide-bottom']
			};
		},
		props: {
			type: { //类型 默认:info,成功:success,失败:error,警告:warning
				type: String,
				default: 'info'
			},
			content: { //内容
				type: String,
				default: '',
			},
			title: { //标题
				type: String,
				default: ''
			},
			show: { //是否显示
				type: Boolean,
				default: false
			},
			delay: {
				type: Number,
				default: 3000
			}
		},
		methods: {
			off() {
				setTimeout(() => {
					this.$emit('shows', false)
				}, this.delay)
			},
		}
	}
</script>

<style lang="scss">
	.info {
		background-color: rgba(242, 246, 252, .7);
		color: rgb(202, 187, 152);
		z-index: 999 !important;
	}

	.success {
		background-color: rgba(225, 243, 216, .7);
		color: rgb(63, 192, 108);
		z-index: 999 !important;
	}

	.error {
		background-color: rgba(253, 226, 226, .7);
		color: rgb(245, 108, 108);
		z-index: 999 !important;
	}

	.warning {
		background-color: rgba(250, 236, 216, .7);
		color: rgb(230, 178, 167);
		z-index: 999 !important;
	}

	.example {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		background-color: #fff;
	}

	.example-body {
		padding: 10px 20px;
		padding-bottom: 0px;
	}
</style>